<template>
  <div>
    <BasicTable @register="registerTable">
      <!-- <template #toolbar>
        <a-button type="primary" @click="handleBatchDeletUser">批量删除</a-button>
      </template> -->
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>

    <Modal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import {
    ActionItem,
    BasicColumn,
    BasicTable,
    EditRecordRow,
    FormSchema,
    useTable,
    TableAction,
  } from '/@/components/Table';
  // import { ChangeStatusApi } from '/@/api/user/averageUser';
  import { ListApi, UpdateApi } from '/@/api/setCenter/toExamine';
  import { eamineStatus } from '/@/assets/dic';
  import formatDic from '/@/utils/formatDic';
  import { toExamineItem } from '/@/api/setCenter/model';
  // import { UserItem } from '/@/api/user/userModel';
  import Modal from './modal.vue';
  import { useModal } from '/@/components/Modal';

  const columns: BasicColumn[] = [
    {
      title: '审核内容',
      dataIndex: 'content',
    },
    {
      title: '状态',
      dataIndex: 'states',
      format: formatDic(eamineStatus),
    },
  ];

  const colProps = {
    span: 6,
  };
  const schemas: FormSchema[] = [
    {
      label: '内容：',
      field: 'content',
      component: 'Input',
      colProps,
    },
    {
      label: '状态：',
      field: 'states',
      component: 'Select',
      componentProps: {
        options: eamineStatus,
      },
      colProps,
    },
  ];

  export default defineComponent({
    name: 'AverageUser',
    components: {
      BasicTable,
      TableAction,
      Modal,
    },
    setup() {
      // const selectedRowKeys = ref<string[]>([]);
      const [registerModal, { openModal }] = useModal();
      // const [registerModal] = useModal();
      const [registerTable, { reload, getSelectRows }] = useTable({
        api: ListApi,
        useSearchForm: true,
        rowSelection: {
          type: 'checkbox',
        },
        columns,
        formConfig: {
          schemas,
          labelWidth: 100,
        },
        actionColumn: {
          width: 280,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      function handleSuccess() {
        reload();
      }
      // 改变用户的使用状态
      function handleChangeStatus(record: toExamineItem) {
        record.states = record.states === 0 ? 1 : 0;
        UpdateApi(record).then((_) => {
          reload();
        });
      }

      // 删除用户
      function handleDeletUser(ids: number | number[]) {
        console.log(ids);
        // DeleteApi(ids).then((_) => {
        //   reload();
        // });
      }

      // 拿到需要批量删除的id
      function handleBatchDeletUser() {
        const selectRows = getSelectRows();
        const ids = selectRows.map((item) => item.id);
        handleDeletUser(ids);
      }

      function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
        return [
          {
            label: record.states === 1 ? '关闭审核' : '开启审核',
            // color: record.status === 0 ? 'success' : '开启审核' 'success',
            popConfirm: {
              title: '确定改变审核状态！',
              confirm() {
                handleChangeStatus(record as toExamineItem);
              },
            },
          },
          // {
          //   label: '删除',
          //   color: 'error',
          //   popConfirm: {
          //     title: '确定要删除吗！',
          //     confirm() {
          //       handleDeletUser(record.id);
          //     },
          //   },
          // },
        ];
      }
      return {
        registerTable,
        createActions,
        handleBatchDeletUser,
        registerModal,
        handleSuccess,
      };
    },
  });
</script>
<style lang="less" scoped></style>
